<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
    <title>BIGFIVE体验版测评</title>
</head>

<body>
    <!-- 头部背景 -->
    <div class="banner">
        <!-- logo -->
        <div class="logo">
            <a href="#"><img src="image/logo.png"></a>
        </div>
        <!-- 报告介绍 -->
        <div class="top_info">
            <h2>BIGFIVE体验版测评</h2>
            <div class="top_info_yz">评测报告由<a href="#">[佰智咨询]</a>提供专业支持</div>
            <div class="top_info_yz">测试者&nbsp;:&nbsp;陈静</div>
            <div class="top_info_yz">测评耗时&nbsp;:&nbsp;10分54秒</div>
            <div class="top_info_btn_dowm" style="margin:40px auto 0"><a href="#">下载PDF报告文档</a></div>
        </div>
    </div>
    <div class="container">
        <div class="chart_title">目录</div>
        <!-- 您的报告包含 -->
        <div class="mreport_con_box" style="margin-top:0;padding: 10px 25px;">
            <!-- 具体内容 -->
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>BigFive测试结果</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>大五模型</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>五个关键维度</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>人格特质、一贯风格及情境</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>可怕的完美</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>后记</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
        </div>
        <!-- 应用第二步结果进行沟通 -->
        <div class="chart_title">PDP得分饼图</div>
        <div class="describe_box">
            <div class="common_p text-center">我的大五人格极性图</div>
            <div id="big_1"></div>
        </div>
        <div class="chart_title">大五人格极性图</div>
        <div class="describe_box">
            <div class="common_p text-center">大五人格维度得分与人群平均分比较</div>
            <div class="bottom_chart">
                <div id="big_2"></div>
            </div>
        </div>
        <div class="chart_title">BigFive测试结果</div>
        <div class="describe_box">
            <div class="disc_title">外倾性</div>
            <p class="common_p mt-3">您的得分高于平均水平，属于高外向性。</p>
            <p class="common_p">外倾性(Extraversion)：外向代表了在外界投入的能量。</p>
            <p class="common_p">高外向的人喜欢与人接触，充满活力，经常感受到积极的情绪。他们热情，喜欢运动，喜欢刺激冒险。在一个群体当中，他们非常健谈，自信，喜欢引起别人的注意。</p>
            <p class="common_p">
                低外向的人比较安静，谨慎，不喜欢与外界过多接触。他们不喜欢与人接触不能被解释为害羞或者抑郁，这仅仅是因为比起高外向的人，他们不需要那么多的刺激，因此喜欢一个人独处。低外向人的这种特点有时会被人误认为是傲慢或者不友好，其实一旦和他接触你经常会发现他是一个非常和善的人。
            </p>
            <div class="disc_title mt-4">宜人性</div>
            <p class="common_p mt-3">您的得分低于平均水平，属于低宜人性。</p>
            <p class="common_p">宜人性(Agreeableness)代表了“爱”，对合作和人际和谐是否看重。</p>
            <p class="common_p">宜人性高的人是善解人意的、友好的、慷慨大方的、乐于助人的，愿意为了别人放弃自己的利益。宜人性高的人对人性持乐观的态度，相信人性本善。
            </p>
            <p class="common_p">
                宜人性低的人则把自己的利益放在别人的利益之上。本质上，他们不关心别人的利益，因此也不乐意去帮助别人。有时候，他们对别人是非常多疑的，怀疑别人的动机。对于某些职位来说，太高的宜人性是没有必要的，尤其是需要强硬和客观判断的场合，例如科学家、评论家和士兵。
            </p>
            <div class="disc_title mt-4">尽责性</div>
            <p class="common_p mt-3">您的得分高于平均水平，属于高尽责性。</p>
            <p class="common_p">尽责性(Conscientiousness)：尽责性指我们控制、管理和调节自身冲动的方式。</p>
            <p class="common_p">
                高尽责的人容易避免麻烦，能够获得更大的成功。人们一般认为高尽责的人更加聪明和可靠，但是高尽责的人可能是一个完美主义者或者是一个工作狂。极端尽责的个体让人觉得单调、乏味、缺少生气。</p>
            <p class="common_p">
                冲动并不一定就是坏事，有时候环境要求我们能够快速决策。低尽责性的个体常被认为是快乐的、有趣的、很好的玩伴。但是冲动的行为常常会给自己带来麻烦，虽然会给个体带来暂时的满足，但却容易产生长期的不良后果，比如攻击他人，吸食毒品等等。低尽责性的个体一般不会获得很大的成就。
            </p>
            <div class="disc_title mt-4">神经质</div>
            <p class="common_p mt-3">您的得分低于平均水平，属于低神经质。</p>
            <p class="common_p">神经质或情绪稳定性(Neuroticism)：神经质指个体体验消极情绪的倾向。</p>
            <p class="common_p">
                神经质维度得分高的人更容易体验到诸如愤怒、焦虑、抑郁等消极的情绪。他们对外界刺激反应比一般人强烈，对情绪的调节能力比较差，经常处于一种不良的情绪状态下。并且这些人思维、决策、以及有效应对外部压力的能力比较差。
            </p>
            <p class="common_p">神经质维度得分低的人较少烦恼，较少情绪化，比较平静，但这并不表明他们经常会有积极的情绪体验，积极情绪体验的频繁程度是外向性的主要内容。
            </p>
            <div class="disc_title mt-4">开放性</div>
            <p class="common_p mt-3">您的得分低于平均水平，属于低开放性。</p>
            <p class="common_p">开放性(Openness)：开放性描述一个人的认知风格。</p>
            <p class="common_p">开放性得分高的人富有想象力和创造力，好奇，欣赏艺术，对美的事物比较敏感。开放性的人偏爱抽象思维，兴趣广泛。开放性的人适合教授等职业。</p>
            <p class="common_p">开放性得分低(即封闭性)的人讲求实际，偏爱常规，比较传统和保守。封闭性的人适合警察、销售、服务性职业等。</p>
            <div class="cr_red text-center mt-4">参见：“大五模型'特质解析表</div>
            <table class="table table-bordered big_table mt-4">
                <tbody>
                    <tr>
                        <td>
                            <div class=" text-center f009688">(低N特质)强适应性</div>
                            <div class=" text-center mt-3">安全的、镇静的、理性的、感觉迟钝的、无负罪感的</div>
                        </td>
                        <td>
                            <div class="big_table_f">
                                <div class="left">
                                    <div class="top">活力</div>
                                    <div class="bot mt-3"><img src="image/big_left (1).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">敏感</div>
                                    <div class="bot mt-3"><img src="image/big_left (2).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">易反应</div>
                                    <div class="bot mt-3"><img src="image/big_left (3).png" alt=""></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                        <td>
                            <div class="f009688 text-center">（高N特质）弱适应性</div>
                            <div class=" text-center mt-3">兴奋的、忧虑的、警觉的、高度紧张的</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class=" text-center f009688">（低E特质）低社交性的</div>
                            <div class=" text-center mt-3">独立的、保守的、难打交道的、阅读艰难的</div>
                        </td>
                        <td>
                            <div class="big_table_f">
                                <div class="left">
                                    <div class="top">内向</div>
                                    <div class="bot mt-3"><img src="image/big_left (1).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">中向</div>
                                    <div class="bot mt-3"><img src="image/big_left (2).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">外向</div>
                                    <div class="bot mt-3"><img src="image/big_left (3).png" alt=""></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                        <td>
                            <div class="f009688 text-center">（高E特质）高社交性的</div>
                            <div class=" text-center mt-3">确信的、社交性、热情的、乐观的、健谈的</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class=" text-center f009688">（低O特质）低开放性的</div>
                            <div class=" text-center mt-3">保守的、实践的、有效率的、专业的、有知识深度的</div>
                        </td>
                        <td>
                            <div class="big_table_f">
                                <div class="left">
                                    <div class="top">保守</div>
                                    <div class="bot mt-3"><img src="image/big_left (1).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">温和</div>
                                    <div class="bot mt-3"><img src="image/big_left (2).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">开拓</div>
                                    <div class="bot mt-3"><img src="image/big_left (3).png" alt=""></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                        <td>
                            <div class="f009688 text-center">（高O特质）高开放性的</div>
                            <div class=" text-center mt-3">兴趣广泛的、好奇的、自由的、追求新奇的</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class=" text-center f009688">（低A特质）低利他性的</div>
                            <div class=" text-center mt-3">怀疑的、攻击性的、坚韧的、自私自利的</div>
                        </td>
                        <td>
                            <div class="big_table_f">
                                <div class="left">
                                    <div class="top">挑战</div>
                                    <div class="bot mt-3"><img src="image/big_left (1).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">调停</div>
                                    <div class="bot mt-3"><img src="image/big_left (2).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">容纳</div>
                                    <div class="bot mt-3"><img src="image/big_left (3).png" alt=""></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                        <td>
                            <div class="f009688 text-center">（高A特质）高利他性的</div>
                            <div class=" text-center mt-3">信任的、谦虚的、合作的、坦白的、不喜冲突的</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class=" text-center f009688">（低C特质）低道德感的</div>
                            <div class=" text-center mt-3">自发的、无组织的</div>
                        </td>
                        <td>
                            <div class="big_table_f">
                                <div class="left">
                                    <div class="top">灵活</div>
                                    <div class="bot mt-3"><img src="image/big_left (1).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">平衡</div>
                                    <div class="bot mt-3"><img src="image/big_left (2).png" alt=""></div>
                                </div>
                                <div class="left">
                                    <div class="top">专注</div>
                                    <div class="bot mt-3"><img src="image/big_left (3).png" alt=""></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                        <td>
                            <div class="f009688 text-center">（高C特质）高道德感的</div>
                            <div class=" text-center mt-3">依附的、有组织的、有原则经验的、谨慎的、固执的</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="chart_title">大五模型</div>
        <div class="describe_box">
            <div class="big_box">
                <img src="image/v2_ppdlti.png" alt="">
           
            </div>
            <p class="common_p text-center mt-3">图2-1 BigFive人格模型</p>
            <p class="common_p mt-4">Noel是一个外向随和，有正义感且情绪稳定、聪明的人。他的兄弟Joel则性格内向、对人不友好、缺乏责任感、情绪反复无常、人亦愚钝。假设要你和另一个人在航天密封舱里待一个星期，你会选择那一个人当自己的同伴呢？答案是不言而喻的。在这个例子中，我们便用了五因素模型的属于对两个人作了描述。可见，人格上的根本差别基本可以体现在这五个维度上。</p>
                <p class="common_p">图2.1列出的五因素模型又被称为“大五模型”，是一种确定5个最基本的人格维度的系统。这是将Cattell的16因素进一步凝练为5个一般因素的尝试。大五模型回答了关于人格最主要问题：人格的本质是什么？ 
                    </p>
                <p class="common_p">大五类因素包括：严谨性、外向性、开放性、宜人性与神经质人格特质。一般记忆为 OCEAN-海洋或NEOAC-独木舟)。O代表Openness to experience （开放性）,C代表 Conscientiousness（严谨性） ，E代表Extraversion（外向性） ，A代表Agreeableness （宜人性），N代表Neuroticism（神经质）。 </p>
                <p class="common_p">神经质因素有时被称为——“情绪不稳定极点”。对于如何解释这些因子存在一些争议比 如Openness,有时被称为“智力”,而不是“开放性”。每一个因素和人类的相关特质相关 联。例如,外向性等相关的素质为寻求gregariousness（群居，聚会）、主张、兴奋、温 暖、活动和积极的情感。</p>
                <p class="common_p">大五因素模型是一种描述模型的人格,心理学家们已经开发出一批理论证实大五因素模型 。</p>
                <p class="common_p">初始模型的提出者是雷蒙德（于1961年）,但未能达到学术的高度。1990年,他的五因素模型得到最高水平的组织接受(歌德堡,1993)。大五类人格特征被认为是具有心理学量表基本结构的个性特征因素。这五种因素提供了丰富的概念架构，且整合所有的研究成果和人格心理学理论。大五类特点也被叫作“五因素模型”(或FFM科斯塔和McCrae,1992年),以及全球因素(罗素和Karol人格,1994)。</p>
                <p class="common_p">目前至少有四套研究人员各自独立研究这个模型的数据,现已鉴定出同样的五大因素:首先Tupes和Cristal,其次是歌德堡在俄勒冈州研究所、美国伊利诺大学的McCrae科斯塔和美国国家卫生研究院。这四套研究人员使用不同的方法找到五个特点,不过每一组的5个因素有所不同的名字和定义。然而,所有研究的总体因素类型是一致的。</p>
        </div>
        <div class="chart_title">五个关键维度</div>
        <div class="describe_box">
            <p class="common_p">如果你需要对两个人做人格方面的比较，不妨尝试按照图2.1中的五个维度对他们进行大概的评估，比较一下两个人在这5个维度上的得分。</p>
            <p class="common_p">因素1是外倾性，用于评估一个人是内向还是外向；</p>
            <p class="common_p">因素2是宜人性，得分高者对人友好、有教养且关心他人，得分低者则冷漠、自我中心或对人抱有敌意；</p>
            <p class="common_p">因素3是责任心，责任心强者一般自律性也很强，工作努力、认真，而缺乏责任心者往往办事马虎，不可靠；</p>
            <p class="common_p">因素4是情绪稳定性（或称神经过敏倾向），得高分者情绪消极，有神经过敏倾向，多是“坏脾气”；</p>
            <p class="common_p">因素5是开放性，得高分者聪明，不拘泥于过去的经验，对新思想持开放态度，并努力使自己的修养水平不断提高。</p>
            <p class="common_p">这种模型的妙处在于，你所能想的所有特质都与这5个因素中的一种有关。如果你正在雇佣一个职员，这5个方面就能让你完全了解对方。这5种特质能告诉我们一个人在各种环境下将如何表现。例如，责任心强的人在工作上一般表现不错，学业成绩优秀，而且很少主动犯错。</p>
        </div>
        <div class="chart_title">人格特质、一贯风格及情境</div>
        <div class="describe_box">
            <p class="common_p">为了预测人们的行为，我们应该关注内在人格特质还是外在的情境呢？事实上，两者都应该考虑。人格特质是相对稳定的，我们已经知道，人格特质能预测如工作表现、危险驾车或成功的职业生涯。但是情境也会显著地影响据我们的行为。
                </p>
            <p class="common_p">据个例子：看电影时跳舞很反常，同样，也没什么人会在溜冰时睡觉，或在葬礼上讲不合适的笑话。尽管如此，你的人格特质还是会预测你到底会去读书还是去参加Party，或参加球赛。简而言之，人格特质和情境的交互作用决定了我们到底如何行动。</p>
            <p class="common_p">现在，很多心理学家都同意这样的观点，即特质和情境之间有着相互作用。特质-情境相互作用决定着人的行为。事实上，外部环境和情境影响着人格特质的表现方式。</p>
            <p class="common_p">为了说明特质-情境的相互作用，让我们举一个例子：请你想象：你先到教堂，又去了学校，之后去一个集会场所或足球赛场。你的行为会发生什么样的变化？随着环境的改变，你说话的声音可能会越来越大，这种变化说明环境影响着人的行为。然而如果你是一个喜欢安静的人，那么，你在喧哗的环境里仍会比那些喜欢热闹的人显得安静，这说明人格特质也在影响你的行为。</p>
        </div>
        <div class="chart_title">可怕的完美</div>
        <div class="describe_box">
            <p class="common_p">从某一点上来讲，对完美的追求往往能帮助人们取得较高的成就。但是不合实际的高标准以及一种称为“完美主义”的人格特质都会带来消极影响。你可以想象，一个完美主义倾向的大学生总是希望得高分。但是，有些学生过于追求完美导致适应不良，其典型的表现就是学习成绩不好。</p>
            <p class="common_p">具有不良完美主义倾向的人往往给自己设定种种无法达到的高标准。这使他们觉得自己总是失败。完美主义的职员容易批评自己，害怕犯错误、常常陷入重度抑郁。</p>
            <p class="common_p">对许多职员来说，过分的完美主义通常源于上司的严厉管理方式，也和从小父母追求完美的教育风格有关。</p>
            <p class="common_p">中世纪的Navajo人喜欢在错综复杂的地毯上留下一个小小的瑕疵。Navojo织工有意地在每条地毯上都留下错误是为了提醒人们，人类并不完美。这也给我们上了一课：人生没有必要追求完美。经历了一些事以后，你就会对自己的错误感到释然。从长远来看，成功往往基于追求“卓越”而不是“完美”。</p>
        </div>
        <div class="chart_title">后记</div>
        <div class="describe_box">
            <p class="common_p">(1)本报告书内容是依当事人的问卷回答产生的结果。其内容的真实性无法保证。 </p>
            <p class="common_p">(2)本内容运用的领域是针对个人性格参考上，不能视此报告作为唯一的评价依据，且本报告不承担任何形式的法律责任。 </p>
            <div class="thank">Thanks!</div>
        </div>
  
        <!-- 说明 -->
    </div>




</body>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
    // 我的大五人格极性图
    var _DataSet = DataSet,
        DataView = _DataSet.DataView;

    var big_1 = [{
        item: '开放性O',
        我的得分: 70,
        大家的得分: 30
    }, {
        item: '神经质N',
        我的得分: 60,
        大家的得分: 70
    }, {
        item: '宜人性A',
        我的得分: 50,
        大家的得分: 60
    }, {
        item: '外向性E',
        我的得分: 40,
        大家的得分: 50
    }, {
        item: '尽责性C',
        我的得分: 60,
        大家的得分: 70
    }];
    var dv = new DataView().source(big_1);
    dv.transform({
        type: 'fold',
        fields: ['我的得分', '大家的得分'], // 展开字段集
        key: 'user', // key字段
        value: 'score' // value字段
    });
    var chart = new G2.Chart({
        container: 'big_1',
        forceFit: true,
        height: 500,
        padding: 'auto'
    });
    chart.source(dv, {
        score: {
            min: 0,
            max: 80
        }
    });
    chart.coord('polar', {
        radius: 0.8
    });
    chart.axis('item', {
        line: null,
        tickLine: null,
        grid: {
            lineStyle: {
                lineDash: null
            },
            hideFirstLine: false
        }
    });
    chart.axis('score', {
        line: null,
        tickLine: null,
        grid: {
            type: 'polygon',
            lineStyle: {
                lineDash: null
            }
        }
    });
    chart.legend('user', {
        marker: 'circle',
        offset: 30
    });
    chart.line().position('item*score').color('user').size(2);
    chart.point().position('item*score').color('user').shape('circle').size(4).style({
        stroke: '#fff',
        lineWidth: 1,
        fillOpacity: 1
    });
    chart.area().position('item*score').color('user');
    chart.render();

    // 大五人格维度得分与人群平均分比较
    var big_2 = [{
        time: '开放性O',
        call: 4,
        人均平均分: 2,
        测试者得分: 2
    }, {
        time: '尽责性C',
        call: 2,
        人均平均分: 6,
        测试者得分: 3
    }, {
        time: '外向性E',
        call: 13,
        人均平均分: 2,
        测试者得分: 5
    }, {
        time: '宜人性A',
        call: 9,
        人均平均分: 9,
        测试者得分: 1
    }, {
        time: '神经质N',
        call: 5,
        人均平均分: 2,
        测试者得分: 3
    }];

    var chart = new G2.Chart({
        container: 'big_2',
        forceFit: true,
        height: 400,
        padding: 'auto'
    });
    chart.source(big_2, {
        call: {
            min: 0
        },
        人均平均分: {
            min: 0
        },
        测试者得分: {
            min: 0
        }
    });
    chart.legend({
        custom: true,
        allowAllCanceled: true,
        items: [{
            value: '人均平均分',
            marker: {
                symbol: 'square',
                fill: '#3182bd',
                radius: 5
            }
        }, {
            value: '测试者得分',
            marker: {
                symbol: 'hyphen',
                stroke: '#fdae6b',
                radius: 5,
                lineWidth: 3
            }
        }],
        onClick: function onClick(ev) {
            var item = ev.item;
            var value = item.value;
            var checked = item.checked;
            var geoms = chart.getAllGeoms();
            for (var i = 0; i < geoms.length; i++) {
                var geom = geoms[i];
                if (geom.getYScale().field === value) {
                    if (checked) {
                        geom.show();
                    }
                } else {
                    geom.hide();
                }
            }
        }
    });
    chart.axis('people', {
        grid: null,
        label: {
            textStyle: {
                fill: '#fdae6b'
            }
        }
    });
    chart.interval().position('time*人均平均分').color('#3182bd');
    chart.line().position('time*测试者得分').color('#fdae6b').size(3).shape('smooth');
    chart.point().position('time*测试者得分').color('#fdae6b').size(3).shape('circle');
    chart.render();
</script>


</html>